<template>
	<view id="task">
		<view class="row-list">
			<view class="row-cell">
				<view class="row-cell-title">任务类型</view>
				<view class="row-cell-right">
					<view class="right-content">{{taskInfo.plan_type_name}}</view>
				</view>
			</view>
			<view class="row-cell">
				<view class="row-cell-title">任务佣金</view>
				<view class="row-cell-right">
					<view class="right-content">{{taskInfo.push_commission}}</view>
				</view>
			</view>
			<view class="row-cell">
				<view class="row-cell-title">任务本金</view>
				<view class="row-cell-right">
					<view class="right-content">{{taskInfo.task_capital ? taskInfo.task_capital : '无' }}</view>
				</view>
			</view>
			<view class="row-cell">
				<view class="row-cell-title">限时时间</view>
				<view class="row-cell-right">
					<view class="right-content">{{taskInfo.limit_plan_over_time}}</view>
				</view>
			</view>
			
		</view>
		<button class="opt-task" @click="optTask">操作任务</button>
		<button class="cancel-task" @click="showGiveUpTaskModal = true">放弃任务</button>
		<u-modal 
		    :showModal="showGiveUpTaskModal" 
			title="放弃任务"
		    @cancleModal="showGiveUpTaskModal = false" 
			@confirmModal="taskGiveUp">
			<view>
				<view class="uni-list">
					<radio-group @change="reasonChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in giveUpReason" :key="index">
							<view style="margin-bottom: 8px;">
								<view style="display: inline-block;">
									<radio :value="item.value" style="transform:scale(0.8)" :checked="index === checkReason" />
								</view>
								<view style="display: inline-block;vertical-align: middle;">{{item.name}}</view>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		apiInquiryWaitOperateTask,
		apiGetTask,
		apiGiveUpTask
	} from '../../../http/apis.js'
	import uModal from '../../components/uni-modal/uni-modal.vue';
	import {
		mapState
	} from 'vuex'
	export default{
		computed: {
			...mapState(['token'])
		},
		components: {
			uModal
		},
		data(){
			return {
				taskInfo: {},
				showGiveUpTaskModal: false,
				giveUpReason: [
					// {
					// 	value: '1',
					// 	name: '找不到商品'
					// },
					{
						value: '2',
						name: '不想做了'
					},
					{
						value: '3',
						name: '现在没时间做'
					},
					// {
					// 	value: '4',
					// 	name: '不能满足商家的要求'
					// },
					// {
					// 	value: '5',
					// 	name: '任务有问题（可联系QQ客服）'
					// },
					{
						value: '7',
						name: '没有本金做任务'
					}
				],
				checkReason: 0,
				giveUpType: 1
			}
		},
		onShow() {
			apiInquiryWaitOperateTask({
				token: this.token
			})
		    .then(res => {
				if (res.data.code == 1) {
					this.taskInfo = res.data.msg;
					
				} else if (res.data.code == 2){
					this.$msg.showToast('当前没有任务');
					setTimeout(()=>{
						uni.switchTab({
							url: '../home/home'
						});
					},500)
				} else {
					this.$msg.showToast(res.data.msg);
				}
			})
			.catch(res => {
				this.$msg.showToast(res.data.msg);
			});
		},
		onLoad() {
			
		},
		methods:{
			optTask(){
				apiInquiryWaitOperateTask({
					token: this.token,
					pushTaskId: this.taskInfo.push_task_id
				})
				.then(res => {
					if (res.data.code == 1) {
						if (this.taskInfo.plan_type == 1) {
							uni.navigateTo({
								url: './salesTask?id=' + this.taskInfo.push_task_id
							})
						} else if(this.taskInfo.plan_type == 2){
							uni.navigateTo({
								url: './flowTask?id=' + this.taskInfo.push_task_id
							})
							
						} else {
							uni.navigateTo({
								url: './evaluationTask?id=' + this.taskInfo.push_task_id
							})
						}
						
					} else {
						this.$msg.showToast(res.data.msg);
					}
				})
				.catch(res => {
					this.$msg.showToast(res.data.msg);
				});
			},
			taskGiveUp(){
				apiGiveUpTask({
					token: this.token,
					pushTaskId: this.taskInfo.push_task_id,
					giveUpType: this.giveUpType
				})
				.then(res => {
					this.showGiveUpTaskModal = false;
					if (res.data.code == 1) {
						this.$msg.showToast('取消成功');
						setTimeout(() => {
							uni.switchTab({
								url: '../home/home'
							});
						}, 500);
					} else {
						this.$msg.showToast(res.data.msg);
					}
				})
				.catch(res => {
					this.showGiveUpTaskModal = false;
					this.$msg.showToast(res.data.msg);
				});
			},
			askGiveupTask() {
				
			},
			reasonChange(evt) {
				for (let i = 0; i < this.giveUpReason.length; i++) {
					if (this.giveUpReason[i].value === evt.target.value) {
						this.checkReason = i;
						this.giveUpType = this.giveUpReason[i].value;
						break;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f5f5f5;
	}
	#task {
		.row-list {
			background: #FFFFFF;
			box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.1);
			border-bottom-left-radius: 20upx;
			border-bottom-right-radius: 20upx;
			.row-cell {
				position: relative;
				border-bottom: 1px solid #F8F8F8;
				padding: 0 24upx 0 38upx;
				height: 106upx;
				line-height: 106upx;
				
				.row-cell-title {
					display: inline-block;
					font-size: $font-base;
					vertical-align: top;
					color: #333333;
					font-size: 30upx;
				}
				.row-cell-right {
					display: inline-block;
					position: absolute;
					right: 20upx;
					color: #666666;
					font-size: 30upx;
					.right-content {
						display: inline-block;
					}
				}
			}
		}
		.opt-task {
			height: 102upx;
			background: #FFFFFF;
			border-radius: 24upx;
			font-size: 30upx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: $theme-color;
			line-height: 102upx;
			margin: 32upx 0;
		}
		.cancel-task{
			height: 102upx;
			background: #FFFFFF;
			border-radius: 24upx;
			font-size: 30upx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #333333;
			line-height: 102upx;
		}
	}
</style>
